<!doctype html>
<html lang="{{ lang }}">
    <head>
        <meta content="IE=edge" http-equiv="X-UA-Compatible" />
        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />

        {% block site_meta %}
        <meta name="robots" content="index,follow">
        <meta name="googlebot" content="index,follow">

        <meta name="google" content="nositelinkssearchbox">
        <meta name="google" content="notranslate">
        {% endblock site_meta %}

        {% block page_meta %}
        {% if config.description %}
        <meta name="description" content="{{ config.description | truncate(length=150) }}">
        {% endif %}
        {% endblock page_meta %}

        {% block css %}
        <link href="{{ get_url(path='style.css', trailing_slash=false) | safe }}" rel="stylesheet" />
        {% endblock css %}
        <title>{% block title %}{{ config.title }}{% endblock title%}</title>
        </script>
    </head>
    <body>
        <script>
            function get_theme() {
                return localStorage.getItem('prefers-color') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : '{% if config.extra.default_theme %}{{ config.extra.default_theme }}{% else %}light{% endif %}')
            }

            /**
             * This code is required here to avoid flickering the light theme when the dark theme is chosen.
             */
            function evaluate_prefers_color() {
                const s = get_theme();
                if (s === 'dark') {
                    document.body.classList.add('dark');
                } else if (s === 'light') {
                    document.body.classList.remove('dark');
                } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                    document.body.classList.add('dark');
                }
            }
        </script>
        {% block content %}
        <p>please fill this with a template</p>
        {% endblock content %}
        <footer>
            <hr text="&copy; Copyright {{ now() | date(format='%Y') }}" />
            <div class="footer-social-media">
                <a id="toggle-theme"></a>
                <a href="/tags">Tags</a>
                {% if config.extra.social_media %}
                {% for social in config.extra.social_media %}
                    {% if social.rel %}
                    <a href="{{ social.url | safe }}" rel="{{ social.rel }}" target="_blank">{{ social.name }}</a>
                    {% else %}
                    <a href="{{ social.url | safe }}" target="_blank">{{ social.name }}</a>
                    {% endif %}
                {% endfor %}
                {% endif %}
            </div>
        </footer>
    </body>

    {% block js %}
    <script>
        function switch_language(e) {
            window.location.href = `/${e.value === default_language ? '' : e.value}`
        }

        function redirect(u) {
            window.location.href = u
        }

        function toggle_prefers_color() {
            localStorage.setItem('prefers-color', get_theme() === 'dark' ? 'light' : 'dark');
            evaluate_prefers_color();
        }

        function init_toggle_theme() {
            const el = document.getElementById('toggle-theme')
            const renderState = () => {
                // Icons from https://fonts.google.com/icons
                el.innerHTML = get_theme() === 'dark'
                    ? `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M479.765 716Q538 716 579 675.235q41-40.764 41-99Q620 518 579.235 477q-40.764-41-99-41Q422 436 381 476.765q-41 40.764-41 99Q340 634 380.765 675q40.764 41 99 41Zm.235 60q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM70 606q-12.75 0-21.375-8.675Q40 588.649 40 575.825 40 563 48.625 554.5T70 546h100q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T170 606H70Zm720 0q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T790 546h100q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T890 606H790ZM479.825 296Q467 296 458.5 287.375T450 266V166q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T510 166v100q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625Zm0 720q-12.825 0-21.325-8.62-8.5-8.63-8.5-21.38V886q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T510 886v100q0 12.75-8.675 21.38-8.676 8.62-21.5 8.62ZM240 378l-57-56q-9-9-8.629-21.603.37-12.604 8.526-21.5 8.896-8.897 21.5-8.897Q217 270 226 279l56 57q8 9 8 21t-8 20.5q-8 8.5-20.5 8.5t-21.5-8Zm494 495-56-57q-8-9-8-21.375T678.5 774q8.5-9 20.5-9t21 9l57 56q9 9 8.629 21.603-.37 12.604-8.526 21.5-8.896 8.897-21.5 8.897Q743 882 734 873Zm-56-495q-9-9-9-21t9-21l56-57q9-9 21.603-8.629 12.604.37 21.5 8.526 8.897 8.896 8.897 21.5Q786 313 777 322l-57 56q-8 8-20.364 8-12.363 0-21.636-8ZM182.897 873.103q-8.897-8.896-8.897-21.5Q174 839 183 830l57-56q8.8-9 20.9-9 12.1 0 20.709 9Q291 783 291 795t-9 21l-56 57q-9 9-21.603 8.629-12.604-.37-21.5-8.526ZM480 576Z"/></svg>`
                    : `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M480 936q-150 0-255-105T120 576q0-150 105-255t255-105q8 0 17 .5t23 1.5q-36 32-56 79t-20 99q0 90 63 153t153 63q52 0 99-18.5t79-51.5q1 12 1.5 19.5t.5 14.5q0 150-105 255T480 936Zm0-60q109 0 190-67.5T771 650q-25 11-53.667 16.5Q688.667 672 660 672q-114.689 0-195.345-80.655Q384 510.689 384 396q0-24 5-51.5t18-62.5q-98 27-162.5 109.5T180 576q0 125 87.5 212.5T480 876Zm-4-297Z"/></svg>`
                evaluate_prefers_color()
            }
            el.onclick = () => {
                localStorage.setItem('prefers-color', get_theme() === 'dark' ? 'light' : 'dark');
                renderState()
            }
            renderState()
        }

        init_toggle_theme()
    </script>
    {% endblock js %}
</html>